

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>退库单主表</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/style/admin.css" media="all">
</head>
<body>

<script type="text/html" id="toolbar">
    <div class="layui-inline ">
        <input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="请输入关键字"
               class="layui-input layui-input-search" id="select">
    </div>
    <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search">
        <i class="layui-icon layui-icon-search" style="font-size: 8px; "></i> 搜索
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add">
        <i class="layui-icon layui-icon-addition" style="font-size: 8px; "></i>新增
    </button>
</script>

<!--表格-->
<div class="layui-card layui-panel-window">
    <table class="layui-hide" id="backstock" lay-filter="test"></table>
</div>
<!--行操作栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<script src="../../../static/layui/layui.js"></script>
<script>
    layui.use(['table', 'element', 'jquery'], function () {
        table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#backstock',
            url: '/stock/getBackstocks',
            title: '退库单主表',
            height: 'full-50',
            contentType: 'application/json',
            method: 'post',
            page: true, //开启分页,
            toolbar: '#toolbar',
            cols: [
                [
                    {field: 'id', title: 'ID', fixed: 'left', width: 60, unresize: true, sort: true}
                    , {field: 'backstockid', title: '单据号', edit: 'text', align: 'center'}
                    , {field: 'deptid', title: '部门名', edit: 'text', align: 'center', templet: function (d) {
                        switch (d.deptid) {
                            case "001":
                                return d = "管理部";
                                break;
                            case "002":
                                return d = "采购部";
                                break;
                            case "003":
                                return d = "销售部";
                                break;
                            case "004":
                                return d = "库存部";
                                break;
                            case "005":
                                return d = "财务部";
                                break;
                        }
                    }}
                    ,{field: 'storehouseid', title: '仓库号', edit: 'text', align: 'center'}
                    , {field: 'employeeid', title: '退库人', edit: 'text', align: 'center'}
                    , {field: 'backDate', title: '退库时间', edit: 'text', align: 'center'}
                    , {field: 'remark', title: '备注', edit: 'text', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 140, align: 'center'}
                ]
            ],
            size: 'lg'
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'del') {
                layer.confirm('你确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/stock/deleteBackstock',
                        type: 'get',
                        data: 'id=' + data.id,
                        success: function (data) {
                            if (data.code === 200) {
                                // 删除成功
                                layer.msg('删除成功', {icon: 1});
                                // 表格重载
                                table.reload('backstock', {});
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }
                    })
                }, function () {
                    // 取消
                    layer.msg("取消删除", {icon: 7})
                });
            } else if (layEvent === 'edit') {
                //免加载页面弹窗
                Comment(data, "编辑")
            }
        });

        //触发事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'add') {
                var tpldata = {
                    "id": "",
                    "backstockid": "",
                    "deptid": "",
                    "storehouseid": "",
                    "employeeid": "",
                    "backDate": "",
                    "remark": ""
                };
                Comment(tpldata, "添加");
            }else if (obj.event === 'search') {

                // 获取到搜索框的内容
                var search = $("#select").val();

                // 表格重载
                table.reload('backstock', {
                    url: '/stock/getBackstocks',
                    where: {
                        'queryString': search
                    }
                })
            }
        });
    });
    /**
     * 编辑和添加功能
     * @param {Object} user 用户数据
     * @param features 功能
     */
    function Comment(user, features) {
        layui.use(['layer', 'laytpl'], function () {
            var $ = layui.$;//重点处,layui有内置jquery模块
            var layer = layui.layer, laytpl = layui.laytpl;
            //给模板 tpl-user 传递参数
            var tpldata = {
                "features": features,
                "id": user.id,
                "backstockid": user.backstockid,
                "deptid": user.deptid,
                "storehouseid": user.storehouseid,
                "employeeid": user.employeeid,
                "backDate": user.backDate,
                "remark": user.remark
            };
            //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
            laytpl(document.getElementById('tpl-user').innerText)
                .render(tpldata, function (html) {
                    //渲染完成后直接打开
                    layer.open({
                        type: 1,
                        shade: false,
                        area: ['70%','50%'],
                        title: false, //不显示标题
                        content: html
                    });
                });
        });
    }
</script>
</body>
<noscript id="tpl-user">
    <!-- style 尽量不要影响到页面其他元素,使用#userinfo范围限定 -->
    <style type="text/css">
        #maininfo .layui-form-label.layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            right: 5px;
        }
    </style>
    <div class="layui-card" id="maininfo">
        <div class="layui-card-header">{{d.features}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="info">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">退库单编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="backstockid" lay-verify="required" lay-reqtext="退库单编号是必填项"
                               placeholder="请输退库单编号"
                               autocomplete="off" value="{{d.backstockid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">创建部门</label>
                    <div class="layui-input-block">
                        <input type="text" name="deptid" lay-verify="required" lay-reqtext="创建部门是必填项"
                               placeholder="请输入创建部门"
                               autocomplete="off" value="{{d.deptid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">仓库编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="storehouseid" lay-verify="required" lay-reqtext="仓库编号是必填项"
                               placeholder="请输入仓库编号"
                               autocomplete="off" value="{{d.storehouseid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">退库时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="backDate" lay-reqtext="退库时间是必填项 "
                               placeholder="yyyy-MM-dd" autocomplete="off" value="{{d.backDate}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">描述备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="remark" lay-verify="required" lay-reqtext="描述备注是必填项"
                               placeholder="请输入描述备注"
                               autocomplete="off" value="{{d.remark}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="demo1">
                            立即提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                    </div>
                </div>
            </form>
            <script>
                layui.use(['jquery', 'form'], function () {
                    var $ = layui.$;
                    var form = layui.form, layer = layui.layer, laydate = layui.laydate;
                    form.verify({
                        contentRule: function (value) {
                            if (value.length < 5) {
                                return '至少得5个字符啊';
                            }
                        }
                    });
                    form.on('submit(demo1)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        if ("{{d.features}}" === "添加") {
                            console.log("退库明细添加");
                            $.ajax({
                                url: '/stock/addBackstock',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("添加成功", {icon: 1})
                                    } else {
                                        layer.msg("添加失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        } else {
                            data.field['id'] = "{{d.id}}";
                            console.log(data.field);
                            $.ajax({
                                url: '/stock/editBackstock',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("编辑成功", {icon: 1})
                                    } else {
                                        layer.msg("编辑失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        }
                    });
                    /** 要使用render,复杂表单才能显示 */
                    form.render();
                });
            </script>
        </div>
    </div>
</noscript>
</html>
